/* Base styles - complements Tailwind CDN utilities */
html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Smooth scrolling */
html { scroll-behavior: smooth; }



/* Transition helpers */
a, button { transition: all 0.2s ease; }

/* Utility for hidden with transition contexts */
.hidden { display: none; }

/* FAQ open state helpers (JS toggles classes) */
.faq-open .faq-content {
    max-height: 24rem !important;
    padding: 0px 0px 15px 0px !important;
}

/* Layout tuning: narrow the global container a bit to match the design reference */
.container { max-width: 1300px !important; }

footer#contact {
    background-image: url(img/bg.png);
    background-size: cover;
    background-position: center;
}
.bg2 {
    background-image: url(img/bg2.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-repeat: repeat;
    background-position: center center;
    background-size: cover;
}
/* Floating blurry bubbles rising background for purple section */
.bubble-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bubble {
  position: absolute;
  bottom: -20%;
  width: 120px;
  height: 120px;
  border-radius: 9999px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.6), rgba(255,255,255,0) 60%);
  filter: blur(12px);
  opacity: 0;
  animation: bubble-rise 12s linear infinite;
}

.bubble--sm { width: 70px; height: 70px; filter: blur(10px); animation-duration: 8s; }
.bubble--md { width: 100px; height: 100px; filter: blur(12px); animation-duration: 10s; }

/* Purple tint utility for bank logos: default tinted, hover returns original and zooms */
.tint-purple {
  filter: grayscale(1) sepia(1) hue-rotate(260deg) saturate(500%) brightness(0.6);
  transition: transform 200ms ease, filter 200ms ease, opacity 200ms ease;
  transform-origin: center;
  will-change: transform, filter;
}

.tint-purple:hover {
  filter: none;
  transform: scale(1.06);
}
.bubble--lg { width: 150px; height: 150px; filter: blur(16px); animation-duration: 12s; }

@keyframes bubble-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  15%  { opacity: 0.9; }
  50%  { transform: translateY(-55vh) translateX(16px); opacity: 0.9; }
  100% { transform: translateY(-110vh) translateX(-16px); opacity: 0; }
}

/* Beautiful entrance animations for hero section */
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zoom-in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animation utility classes */
.fade-in {
  opacity: 0;
  animation: fade-in-up 0.8s ease-out forwards;
}

.zoom-in {
  opacity: 0;
  animation: zoom-in 0.8s ease-out forwards;
}

/* Animation delay utilities */
.anim-delay-100 { animation-delay: 0.1s; }
.anim-delay-200 { animation-delay: 0.2s; }
.anim-delay-300 { animation-delay: 0.3s; }
.anim-delay-400 { animation-delay: 0.4s; }
.anim-delay-500 { animation-delay: 0.5s; }

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .fade-in, .zoom-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* SVG Hover Rotation Effects */
.group-hover\:rotate-360:hover {
  transform: rotate(360deg);
}

@media (hover: hover) {
  .group:hover .group-hover\:rotate-360 {
    transform: rotate(360deg);
  }
}

/* Scroll Animation Classes */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.scroll-animate-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.6s ease-out;
}

.scroll-animate-left.animate-in {
  opacity: 1;
  transform: translateX(0);
}

.scroll-animate-right {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.6s ease-out;
}

.scroll-animate-right.animate-in {
  opacity: 1;
  transform: translateX(0);
}

.scroll-animate-scale {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.6s ease-out;
}

.scroll-animate-scale.animate-in {
  opacity: 1;
  transform: scale(1);
}

.scroll-animate-stagger {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.scroll-animate-stagger.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Word-by-word text animation effect */
.word-animate {
  display: inline;
}

.word-animate .word {
  display: inline;
  color: inherit;
  transition: color 0.3s ease;
}

.word-animate:hover .word {
  color: #6b7280; /* Default gray color */
}

.word-animate .word.highlight {
  color: #4e3b7d !important; /* Purple highlight color */
  font-weight: 600;
}

@keyframes word-highlight {
  0% {
    color: #6b7280;
  }
  50% {
    color: #4e3b7d;
    font-weight: 600;
  }
  100% {
    color: #6b7280;
  }
}

/* Customer review author info spacing */
.ml-3 {
  margin-top: 15px;
}