/* Custom Styles and Animations for Simbels Montessori School */


*, *::before, *::after {
  font-family: 'Montserrat', sans-serif !important;
  box-sizing: border-box;
}

/* Restrict font weights strictly to 300, 400, or 500 */
.font-light, font-light {
  font-weight: 300 !important;
}
.font-normal, font-normal {
  font-weight: 400 !important;
}
.font-medium, font-medium {
  font-weight: 500 !important;
}
.font-semibold, .font-bold, .font-extrabold, .font-black,
font-semibold, font-bold, font-extrabold, font-black,
h1, h2, h3, h4, h5, h6, strong, b, th {
  font-weight: 500 !important;
}

/* Remove colored stripes from all cards (overrides thick borders to standard 1px borders) */
.border-l-4, .border-l-8, .border-t-4, .border-t-8, .border-b-8, .border-r-4, .border-r-8,
.border-l-[4px], .border-l-[8px], .border-t-[4px], .border-t-[8px], .border-b-[8px], .border-r-[4px], .border-r-[8px] {
  border-left-width: 1px !important;
  border-top-width: 1px !important;
  border-bottom-width: 1px !important;
  border-right-width: 1px !important;
  border-color: #e2e8f0 !important; /* light gray neutral */
}

/* Override inline border color styles to gray */
[style*="border-color"], 
[style*="border-left-color"], 
[style*="border-top-color"], 
[style*="border-bottom-color"], 
[style*="border-right-color"] {
  border-color: #e2e8f0 !important;
}


html, body {
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  background-color: #F9FEFF; /* Soft White */
  color: #0D1B5E; /* Deep Navy */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}


/* Custom CSS Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #EEF9FF;
}
::-webkit-scrollbar-thumb {
  background: #00AEEF;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0D1B5E;
}

/* Animations */

/* Float animation — hero butterfly */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(3deg); }
}
.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Pulse glow — CTA button */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 174, 239, 0.4); }
  50% { box-shadow: 0 0 0 16px rgba(0, 174, 239, 0); }
}
.animate-pulse-glow {
  animation: pulseGlow 2s infinite;
}

/* Color wave — hero background */
@keyframes colorWave {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animate-color-wave {
  background: linear-gradient(135deg, #EEF9FF, #CBEBFF, #EEF9FF, #CBEBFF);
  background-size: 400% 400%;
  animation: colorWave 8s ease infinite;
}

/* Fade up — scroll entry */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
  opacity: 0;
  animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Scale pop — icon entry */
@keyframes scalePop {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
.animate-scale-pop {
  opacity: 0;
  animation: scalePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Slide in navbar */
@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
.animate-slide-down {
  animation: slideDown 0.5s ease-out forwards;
}

/* Bounce CTA */
@keyframes bounceIn {
  0% { transform: scale(0.9); opacity: 0; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}
.animate-bounce-in {
  animation: bounceIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
}

/* Scroll Trigger Utility Classes (initially hidden) */
.reveal-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-item.active {
  opacity: 1;
  transform: translateY(0);
}

.scale-pop-item {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.scale-pop-item.active {
  opacity: 1;
  transform: scale(1);
}

/* Hover Lift Effect */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(13, 27, 94, 0.1), 0 10px 10px -5px rgba(13, 27, 94, 0.04);
}

/* Carousel Testimonial Dot Styles */
.dot {
  cursor: pointer;
  transition: background-color 0.3s ease, width 0.3s ease;
}
.dot.active {
  width: 24px;
}



/* Accordion max-height helper */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Partners Marquee */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
}
.marquee-content {
  display: inline-block;
  animation: marquee 25s linear infinite;
}
.marquee-content:hover {
  animation-play-state: paused;
}
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* Top Header Bar Scroll Collapse Animations */
.top-header-bar {
  max-height: 40px;
  opacity: 1;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              padding-top 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              padding-bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.2s ease, 
              border-bottom-width 0.3s ease;
}

#global-header.scrolled-down .top-header-bar {
  max-height: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  opacity: 0 !important;
  border-bottom-width: 0px !important;
  pointer-events: none;
}

/* Floating Contact Button Slow Bouncing Keyframes */
@keyframes bounceSlow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
.animate-bounce-slow {
  animation: bounceSlow 2.5s ease-in-out infinite;
}

/* Animated Wave Dividers */
@keyframes waveMove {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes waveMoveRev {
  0% { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.animate-wave-back {
  animation: waveMove 24s linear infinite;
}
.animate-wave-middle {
  animation: waveMoveRev 16s linear infinite;
}
.animate-wave-front {
  animation: waveMove 10s linear infinite;
}