/* Custom Tailwind Configuration based on Logo and Palette */

:root {
  /* --- Brand Color Palette --- */
  --color-charcoal-dark: #2c2f33; /* Deeper neutral for professional tone */
  --color-kiddos-red: #e53935; /* CTA accent color */
  --color-cream-bg: #fff9f3; /* Warmer premium cream */
  --color-mint-light: #c8e6c9;
  --color-peach-light: #ffdab9;
  --color-sky-light: #b3e5fc;
}

/* --- Base Styling --- */
body {
  font-family: "Inter", sans-serif;
  background-color: var(--color-cream-bg);
  color: var(--color-charcoal-dark);
  margin: 0;
  overflow-x: hidden;
}

.text-charcoal-dark {
  color: var(--color-charcoal-dark);
}
.bg-kiddos-red {
  background-color: var(--color-kiddos-red);
}
.text-kiddos-red {
  color: var(--color-kiddos-red);
}
.bg-cream-bg {
  background-color: var(--color-cream-bg);
}

/* --- Premium CTA Button --- */
.cta-button {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 6px 12px rgba(229, 57, 53, 0.2);
  border: none;
}
.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(229, 57, 53, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.05);
  opacity: 0.98;
}
.cta-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* --- Section Background Helpers --- */
.bg-mint-light {
  background-color: var(--color-mint-light);
}
.bg-peach-light {
  background-color: var(--color-peach-light);
}
.bg-sky-light {
  background-color: var(--color-sky-light);
}

/* --- Mobile Menu Styles (Start Hidden Off-Screen) --- */
#mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}
#mobile-menu.open {
  transform: translateX(0);
}

/* --- Accordion Styles --- */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
}
.accordion-item.active .accordion-content {
  /* Set a height large enough for any content */
  max-height: 500px;
}
.accordion-button.active i[data-lucide="chevron-down"] {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.accordion-button i[data-lucide="chevron-down"] {
  transition: transform 0.3s ease;
}

.header_items {
  position: relative;
  display: inline-block;
  transition: color 0.3s ease, transform 0.3s ease;
}

.header_items:hover {
  color: var(--color-kiddos-red);
  transform: scale(1.05); /* subtle zoom effect */
}

.header_items::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: var(--color-kiddos-red);
  transition: width 0.3s ease;
}

.header_items:hover::after {
  width: 100%;
}

/* --- Mobile View Adjustments --- */
@media (max-width: 768px) {
  body {
    box-sizing: border-box;
  }


  

  
  header nav,
  #mobile-menu,
  #product-grid,
  .prod-card {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .prod-card .card-hover {
    gap: 1rem; /* Reduce grid gap on small screens */
    padding: 1rem !important;
  }

  .prod-card .prod-img {
    width: 140px !important;
    height: 140px !important;
  }

  .cta-button,
  .cta-anim {
    width: 100%;
    text-align: center;
  }
}

/* ✅ Premium Animations */
@keyframes float-organic-1 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-25px);
  }
}
@keyframes float-organic-2 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(30px);
  }
}
.animate-float-organic-1 {
  animation: float-organic-1 7s ease-in-out infinite;
}
.animate-float-organic-2 {
  animation: float-organic-2 9s ease-in-out infinite;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  animation: fadeIn 1.4s ease forwards;
}

@keyframes blob {
  0%,
  100% {
    transform: scale(1) translate(0, 0);
  }
  33% {
    transform: scale(1.1) translate(10px, -10px);
  }
  66% {
    transform: scale(0.95) translate(-10px, 10px);
  }
}
.animate-blob {
  animation: blob 8s infinite;
}

/* Small inline CSS for subtle animations and effects */
/* slow animations (used intentionally small and subtle) */
@keyframes float-slow {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes rotate-slow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.animate-float-slow {
  animation: float-slow 6s ease-in-out infinite;
}
.animate-rotate-slow {
  animation: rotate-slow 45s linear infinite;
}

/* layering rule for modal z-index to stay above header */
#cert-modal {
  z-index: 9999;
  display: none;
} /* JS will toggle display:flex */
#cert-modal.show {
  display: flex;
}

/* slight glass effect for cert cards */
.cert-card img {
  transition: transform 0.35s ease;
}
.cert-card:hover img {
  transform: scale(1.03);
}

/* accessible focus state fallback */
.cert-card:focus {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/*certificates*/
@keyframes float-slow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes rotate-slow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.animate-float-slow {
  animation: float-slow 6s ease-in-out infinite;
}
.animate-rotate-slow {
  animation: rotate-slow 45s linear infinite;
}
#cert-modal {
  z-index: 9999;
  display: none;
}
#cert-modal.show {
  display: flex;
}
.cert-card img {
  transition: transform 0.35s ease;
}
.cert-card:hover img {
  transform: scale(1.03);
}
.cert-card:focus {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}


@media (max-width: 450px) {
  .carousel-wrapper{
    height:170px;
  }
  .carousel-slide{
    height: 150px;
    width: 400px;
  }
  #hero{
    height: 165px;
  }
  
}