body {
            font-family: 'Poppins', sans-serif;
            scroll-behavior: smooth;
        }
        html{
            scroll-behavior: smooth;
        }
        .gradient-bg {
            background: linear-gradient(45deg, #FF4D4D, #F9CB28, #4CAF50, #2196F3);
            background-size: 300% 300%;
            animation: gradient 8s ease infinite;
        }
        
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .hero-slide {
            animation: fadeIn 1s ease-in;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .methodology-card {
            transition: all 0.3s ease;
        }
        
        .methodology-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        .faq-item {
            transition: all 0.3s ease;
        }
        
        .faq-item:hover {
            background-color: #f8f9fa;
        }
        
        .contact-form {
            animation: slideDown 0.5s ease-out;
        }
        
        @keyframes slideDown {
            from { 
                opacity: 0;
                transform: translateY(-20px);
            }
            to { 
                opacity: 1;
                transform: translateY(0);
            }
        }

    
        .testimonial-card {
            transition: all 0.3s ease;
        }
        .testimonial-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .quote-icon {
            opacity: 0.1;
            font-size: 4rem;
            position: absolute;
            top: 8px;
            right: 15px;
        }
        
        

  #scrollPopup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgb(222, 86, 36);
  color: #fff;
  padding: 16px 22px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  max-width: 280px;
  z-index: 10000;

  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
  line-height: 1.35;
  font-family: system-ui, sans-serif;
}
#scrollPopup.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#scrollPopup .title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}
#scrollPopup .sub {
  margin: 6px 0 0;
  font-size: 13px;
  opacity: 0.9;
}
    /* Floating WhatsApp button style */
    #whatsapp-popup {
      position: fixed;
      bottom: 20px;
      right: -200px; /* Start hidden off screen */
      background-color: #eb8642;
      color: white;
      border-radius: 30px;
      padding: 12px 17px;
      display: flex;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      font-family: Arial, sans-serif;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      cursor: pointer;
      z-index: 9999;
      opacity: 0;
      transition: all 0.6s ease-in-out;
      text-decoration: none;
    
    }
    #whatsapp-popup:hover{
        background: green;
    }
    /* Icon inside button */
    #whatsapp-popup i {
      font-size: 16px;
      margin-right: 5px;
    }

    /* When visible */
    #whatsapp-popup.show {
      right: 20px;   /* Slide into position */
      opacity: 1;
      animation: bounceIn 0.8s ease-out;
    }

    /* Bounce keyframes */
    @keyframes bounceIn {
      0%   { transform: translateX(150px); }
      60%  { transform: translateX(-20px); }
      80%  { transform: translateX(10px); }
      100% { transform: translateX(0); }
    }
   
    /*  Facilitators
  /* Fade-up keyframes */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(1.5rem) scale(0.98);
    filter: blur(2px);
  }
  60% {
    opacity: 1;
    transform: translateY(0.25rem) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Utility class to apply the animation (works alongside Tailwind classes) */
.animate-in {
  animation-name: fadeUp;
  animation-duration: 700ms;
  animation-timing-function: cubic-bezier(.22,.9,.24,1);
  animation-fill-mode: forwards;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}


 /*graduation */

     .news {
  max-width: 1000px;
  margin: 40px auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 12px;

}

.news h6 {
  text-transform: uppercase;
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #222;
  letter-spacing: 1px;
}

.news-slider {
  overflow: hidden;
  width: 100%;
  margin-bottom: 20px;
  position: relative;
}

.news-slider ul {
  display: flex;
  gap: 20px;
  animation: slide 30s linear infinite;
}

.news-slider li {
  list-style: none;
  flex: 0 0 auto;
}

.news-slider img {
  width: 400px;
  height: 330px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.news-slider img:hover {
  transform: scale(1.05);
}

.news p {
  line-height: 1.6;
  font-size: 0.95rem;
  /* color: #333; */
  margin-top: 10px;
}

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pause on hover */
.news-slider:hover ul {
  animation-play-state: paused;
}

/* Responsive */
@media (max-width: 600px) {
  .news-slider img {
    width: 150px;
    height: 100px;
  } }