/* ================================ */
/* Section: IT Services CTA Animations */
/* ================================ */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  0% { opacity: 0; transform: translateX(30px); }
  100% { opacity: 1; transform: translateX(0); }
}

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

.animate-fadeInUp {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-slideInRight {
  opacity: 0;
  animation: slideInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-zoomIn {
  opacity: 0;
  animation: zoomIn 0.8s ease-out forwards;
}

/* ================================ */
/* Case Studies Animations */
/* ================================ */
@keyframes fadeInUpCase {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-fadeInUpCase {
  opacity: 0;
  animation: fadeInUpCase 0.9s ease-out forwards;
}

/* ================================ */
/* IT Services Tabs Animations */
/* ================================ */
@keyframes fadeInUpTab {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeftTab {
  0% { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRightTab {
  0% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}

.animate-fadeInUpTab {
  opacity: 0;
  animation: fadeInUpTab 0.9s ease-out forwards;
}

.animate-fadeInLeftTab {
  opacity: 0;
  animation: fadeInLeftTab 0.9s ease-out forwards;
}

.animate-fadeInRightTab {
  opacity: 0;
  animation: fadeInRightTab 0.9s ease-out forwards;
}

/* ================================ */
/* Testimonial Animations */
/* ================================ */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

.testimonial-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.testimonial-track {
  display: flex;
}
.testimonial-item {
  flex: 0 0 100%;
  box-sizing: border-box;
}

/* ================================ */
/* CTA Animations */
/* ================================ */
@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.animate-bounceIn {
  opacity: 0;
  animation: bounceIn 0.9s ease forwards;
}

/* CTA + Offer Helpers (Start hidden) */
#cta-heading,
#cta-button,
.offer-heading,
.offer-card {
  opacity: 0;
  transform: translateY(30px);
}

/* Smooth show helpers */
.hidden-element {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease-out;
}
.show-element {
  opacity: 1;
  transform: translateY(0);
}

/* ================================ */
/* Responsive Tweaks */
/* ================================ */
@media (max-width: 768px) {
  .animate-fadeInUp,
  .animate-slideInRight,
  .animate-zoomIn,
  .animate-fadeInUpCase,
  .animate-fadeInUpTab,
  .animate-fadeInLeftTab,
  .animate-fadeInRightTab {
    animation-duration: 1.2s;
  }
}


/*
    * This CSS is included locally for simplicity. 
    * In a real project, you would place these rules
    * in `css/home_page/animations.css` as per the
    * provided structure.
  */

  .animate-fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
  }
  .animate-fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .animate-fade-in-left {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
  }
  .animate-fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
  }


  .faq-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.faq-item.visible {
  opacity: 1;
  transform: translateX(0);
}

.animate-fadeInUp, .animate-slideInRight, .animate-zoomIn, .animate-bounceIn {
  opacity: 0;
  transform: translateY(20px); /* or translateX for slideInRight */
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-slideInRight {
  transform: translateX(20px);
}

.animate-visible {
  opacity: 1 !important;
  transform: translateX(0) translateY(0) !important;
}


  /* Optional: Stagger the animations */
  .faq-item:nth-child(1).animate-fade-in-left { transition-delay: 0.2s; }
  .faq-item:nth-child(2).animate-fade-in-left { transition-delay: 0.4s; }
  .faq-item:nth-child(3).animate-fade-in-left { transition-delay: 0.6s; }
  .faq-item:nth-child(4).animate-fade-in-left { transition-delay: 0.8s; }


  /* @keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.8s ease-out;
} */