/* =========================================
   Ni Nurturing Institute — Main Stylesheet
   ========================================= */

/* Custom Animations */
.fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
  transform: translateY(20px);
}
@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Marquee Animation for Companies */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-scroll {
  animation: scroll 25s linear infinite;
}

section { scroll-margin-top: 5rem; }

/* Testimonial Slider Styles */
.testimonial-slide {
  flex-shrink: 0;
  flex: 0 0 99%; /* Mobile: 1 card */
  min-height: 280px;
  transition: all 0.5s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 640px) {
  .testimonial-slide {
    flex: 0 0 47%; /* Tablet: 2 cards */
  }
}
@media (min-width: 1024px) {
  .testimonial-slide {
    min-width: 365px; /* Desktop: Fixed width for consistent layout */
    max-width: 365px;
    min-height: 340px;
  }
}

/* Canvas Chart */
.chart-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 400px;
  margin: 0 auto;
}
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #f5bd16;
  cursor: pointer;
  margin-top: -8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #e2e8f0;
  border-radius: 2px;
}

/* Scrollbar Hiding */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* FAQ Accordion Transitions */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0%   { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Question and Answer */
.faq-content {
  transition: max-height 0.35s ease, padding 0.3s ease;
}

/* Form Validation States */
#contactForm input,
#contactForm textarea {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
#contactForm input.border-red-400,
#contactForm textarea.border-red-400 {
  border-color: #f87171;
  box-shadow: 0 1px 0 0 #f87171;
}
#contactForm input.border-green-400,
#contactForm textarea.border-green-400 {
  border-color: #4ade80;
  box-shadow: 0 1px 0 0 #4ade80;
}
.field-error {
  font-size: 10px;
  min-height: 14px;
}

/* YouTube Embed */
#youtubeContainer iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}