diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
index 4ae0987..a3a02b3 100644
--- a/src/assets/css/styles.css
+++ b/src/assets/css/styles.css
@@ -729,6 +729,16 @@ input[type="number"]:focus {
     color: var(--blanc-creme);
 }
 
+/* Scroll Animations */
+.fade-in-element {
+    opacity: 0;
+    transform: translateY(30px);
+}
+
+.fade-in-element.animate-in {
+    animation: fadeInUp 0.8s ease forwards;
+}
+
 /* Animations */
 @keyframes fadeInUp {
     from {
diff --git a/src/assets/js/main.js b/src/assets/js/main.js
index c77b701..5270359 100644
--- a/src/assets/js/main.js
+++ b/src/assets/js/main.js
@@ -57,21 +57,22 @@ document.addEventListener('click', (e) => {
 
 // Scroll animations
 const observerOptions = {
-    threshold: 0.1,
-    rootMargin: '0px 0px -100px 0px'
+    threshold: 0.15,
+    rootMargin: '0px 0px -50px 0px'
 };
 
 const observer = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
         if (entry.isIntersecting) {
-            entry.target.style.animation = 'fadeInUp 0.8s ease both';
+            entry.target.classList.add('animate-in');
             observer.unobserve(entry.target);
         }
     });
 }, observerOptions);
 
 // Observe all cards
-document.querySelectorAll('.service-card, .project-card, .value-card').forEach(el => {
+document.querySelectorAll('.service-card, .project-card, .value-card, .partner-card').forEach(el => {
+    el.classList.add('fade-in-element');
     observer.observe(el);
 });