// /* Base styles for fade-in animations */
// .fade-in {
//   opacity: 0; /* Elements start hidden */
//   transform: translateY(20px); /* Slight downward offset */
//   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
//   will-change: opacity, transform;
// }

// /* Fade-In from Left */
// .fade-in-left {
//   opacity: 0; /* Start fully transparent */
//   transform: translateX(-50px); /* Start 50px to the left */
//   will-change: opacity, transform; /* Optimize for performance */
//   overflow-x: hidden;
// }

// /* Fade-In from Right */
// .fade-in-right {
//   opacity: 0;
//   transform: translateX(50px);
//   will-change: opacity, transform;
//   overflow-x: hidden;
// }

// /* Fade-In from Top */
// .fade-in-top {
//   opacity: 0;
//   transform: translateY(-50px);
//   will-change: opacity, transform;
// }

// /* Fade-In from Bottom */
// .fade-in-bottom {
//   opacity: 0;
//   transform: translateY(50px);
//   will-change: opacity, transform;
// }

// /* Fade-In with Zoom Effect */
// .fade-in-zoom {
//   opacity: 0;
//   transform: scale(0.8);
//   transition: opacity 1s ease-out, transform 2s ease-out;
//   will-change: opacity, transform;
// }

// /* Once the element is in view, make it visible */
// .is-visible {
//   opacity: 1;
//   transform: translateX(0) translateY(0) scale(1);
// }

// /*parralax*/

// /* Parallax Elements Initial State */
// .parallax {
//   opacity: 0; /* Start fully transparent */
//   will-change: transform, opacity; /* Optimize for performance */
// }