/* Animation styles added inline as requested */
    .animate-on-scroll {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }

    .animate-on-scroll.animated {
      opacity: 1;
      transform: translateY(0);
    }

    /* Specific animation delays */
    .intro-text.animate-on-scroll {
      transition-delay: 0.3s;
    }

    .intro-image.animate-on-scroll {
      transition-delay: 0.6s;
    }

    .portfolio-showcase .section-header.animate-on-scroll {
      transition-delay: 0.2s;
    }

    .portfolio-showcase .portfolio-grid.animate-on-scroll {
      transition-delay: 0.4s;
    }

    .partners-showcase .section-header.animate-on-scroll {
      transition-delay: 0.2s;
    }

    .partners-showcase .partners-container.animate-on-scroll {
      transition-delay: 0.4s;
    }

    .pricing-section .pricing-header.animate-on-scroll {
      transition-delay: 0.2s;
    }

    .pricing-section .pricing-categories.animate-on-scroll {
      transition-delay: 0.3s;
    }

    .pricing-section .pricing-container.animate-on-scroll {
      transition-delay: 0.4s;
    }

    .portfolio-container .portfolio-filters.animate-on-scroll {
      transition-delay: 0.2s;
      /* padding: 0px 0px 20px 0px; */
    }

    .portfolio-container .portfolio-scroller.animate-on-scroll {
      transition-delay: 0.4s;
    }

    .client-testimonials .testimonials-header.animate-on-scroll {
      transition-delay: 0.2s;
    }

    .client-testimonials .testimonials-container.animate-on-scroll {
      transition-delay: 0.4s;
    }



/* Responsive for mobile screens */
@media (max-width: 768px) {
  .portfolio-container .portfolio-filters.animate-on-scroll {
    padding: 0px 0px 80px 0px;
   
  }
}



@media (max-width: 768px) {
  .portfolio-filters {
    gap: 10px;
    padding: 0 12px;
  }

  .portfolio-scroller {
    padding: 12px;
  }

  .portfolio-item {
    min-width: 250px;
  }

  .portfolio-overlay {
    padding: 16px;
  }

  .portfolio-title {
    font-size: 1.1rem;
  }

  .portfolio-description {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .portfolio-container {
    padding: 40px 0;
  }

  .portfolio-scroller {
    gap: 12px;
    padding: 10px;
  }

  .portfolio-item {
    min-width: 220px;
  }

  .portfolio-bg-text {
    font-size: 2rem;
  }

  .filter-btn {
    padding: 8px 16px;
    font-size: 0.85rem;
  }

  .portfolio-overlay {
    padding: 14px;
  }
}

/* =====================
   Modal Responsiveness
====================== */
@media (max-width: 768px) {
  .modal-content {
    max-width: 90%;
    padding: 16px;
  }

  .modal-title {
    font-size: 1.25rem;
  }

  .modal-description {
    font-size: 0.95rem;
  }

  .modal-tech {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .modal-content {
    padding: 12px;
  }

  .modal-title {
    font-size: 1.1rem;
  }

  .modal-description {
    font-size: 0.9rem;
  }

  .modal-link {
    font-size: 0.85rem;
  }
}



.portfolio-scroller {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  gap: 2rem;
  padding: 2rem;
  scroll-snap-type: x mandatory;
  margin: 0px  0px 0px 100px;
}

.portfolio-item {
  flex: 0 0 auto;
  width: 300px; /* Adjust size as needed */
  scroll-snap-align: start;
  transition: transform 0.3s ease;
}


.section-title{
  color: white;
}