// // /* Base styles for fade-in animations */
/* Animate from Bottom */
// .animate-from-bottom {
//   opacity: 0;
//   transform: translateY(50px);
//   will-change: opacity, transform;
// }

// /* Animate from Left */
// .animate-from-left {
//   opacity: 0;
//   transform: translateX(-50px);
//   will-change: opacity, transform;
//   overflow-x: hidden; /* Hides horizontal overflow on mobile */
// }

// /* Animate from Right */
// .animate-from-right {
//   opacity: 0;
//   transform: translateX(50px);
//   will-change: opacity, transform;
//   overflow-x: hidden; /* Hides horizontal overflow on mobile */
// }

// /* Simple Fade-In */
// .animate-fade-in {
//   opacity: 0;
//   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);
// // }

// /* 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 */
// }