.brand {
  background-color: #0b0f48;
}

html {
  scroll-behavior: smooth;
}

/* for cart animation start  */
/* ============================= */
/* Shake Animation */
/* ============================= */
@keyframes cartShakeBounce {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }

  15% {
    transform: translateX(-4px) translateY(-2px) rotate(-3deg);
  }

  30% {
    transform: translateX(4px) translateY(-4px) rotate(3deg);
  }

  45% {
    transform: translateX(-3px) translateY(0px) rotate(-2deg);
  }

  60% {
    transform: translateX(3px) translateY(2px) rotate(2deg);
  }

  75% {
    transform: translateX(-1px) translateY(-1px) rotate(-1deg);
  }

  85% {
    transform: translateX(1px) translateY(3px) rotate(1deg);
  }

  100% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
}

.animate-shake {
  animation: cartShakeBounce 2s ease-in-out infinite;
}

/* ============================= */
/* Shadow Pulse */
/* ============================= */
@keyframes shadowPulse {
  0% {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
  }

  50% {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  }

  100% {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
  }
}

.animate-shadow {
  animation: shadowPulse 2s ease-in-out infinite;
}

/* ============================= */
/* Ripple Effect */
/* ============================= */
@keyframes rippleEffect {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.ripple::before,
.ripple::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: rgba(255, 193, 7, 0.4);
  animation: rippleEffect 2s infinite;
  z-index: -1;
}

.ripple::after {
  animation-delay: 1s;
}

/* Pause animation on hover (better UX) */
.pause-on-hover:hover {
  animation-play-state: paused;
}

.faq-item {
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  color: #6b7280; /* default gray */
}

/* ACTIVE STATE */
.faq-item.active {
  background: #0b0f48;
}

.faq-item.active .faq-btn span,
.faq-item.active .faq-icon {
  color: white;
}

/* 👇 THIS is the key fix */
.faq-item.active .faq-content {
  color: white;
  margin-top: 15px;
}

.embla__viewport {
  overflow: hidden;
}

.embla__container {
  display: flex;
  touch-action: pan-y pinch-zoom;
}

.embla__slide {
  flex: 0 0 33.333%; /* 👈 3 cards per view on desktop */
  min-width: 0;
  padding-right: 16px; /* spacing between cards */
}

/* responsive */
@media (max-width: 768px) {
  .embla__slide {
    flex: 0 0 100%;
  }
}