body {
    overflow-x: hidden; /* Prevent horizontal scrollbar during animations */
}

/* Smoother transition settings for left-to-right animations */
.fadeInRight {
    backface-visibility: hidden; /* Reduce flickering */
    perspective: 1000px; /* Improve 3D performance */
}

/* Enhanced hover effects */
.mission-vision .image-container-1,
.mission-vision .image-container-2 {
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.mission-vision .image-container-1:hover,
.mission-vision .image-container-2:hover {
    transform: translateY(-10px);
}

/* Image hover effects */
.left-image-desk,
.sol-img img,
.journey-img img,
.icon-responsive {
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.left-image-desk:hover,
.journey-img img:hover,
.icon-responsive:hover {
    transform: scale(1.05);
}

/* Smoother paragraphs animation */
.about-text p {
    transition-delay: calc(var(--index, 0) * 150ms);
}

.about-text p:nth-child(1) { --index: 1; }
.about-text p:nth-child(2) { --index: 2; }
.about-text p:nth-child(3) { --index: 3; }
.about-text p:nth-child(4) { --index: 4; }
.about-text p:nth-child(5) { --index: 5; }

/* Journey section smoother animations */
.journey-text p {
    transition-delay: calc(var(--index, 0) * 150ms);
}

.journey-text p:nth-child(1) { --index: 1; }
.journey-text p:nth-child(2) { --index: 2; }
.journey-text p:nth-child(3) { --index: 3; }

/* Smoother icons animations */
.icon-plan {
    transition-delay: calc(var(--index, 0) * 150ms);
}

.journey-icon .icon-plan:nth-child(1) { --index: 1; }
.journey-icon .icon-plan:nth-child(2) { --index: 2; }
.journey-icon .icon-plan:nth-child(3) { --index: 3; }
.journey-icon .icon-plan:nth-child(4) { --index: 4; }

/* Mission/Vision smooth staggered animations */
.mission-vision .image-container-1 {
    transition-delay: 100ms;
}

.mission-vision .image-container-2 {
    transition-delay: 300ms;
}

/* Custom timing for specific elements to ensure smooth flow */
.display-3-css.fadeInRight {
    transition-delay: 100ms;
}

.journey-head.fadeInRight {
    transition-delay: 200ms;
}

/* Optimize for smoother animations on mobile */
@media (max-width: 768px) {
    .fadeInRight {
        transform: translateX(-20px); /* Smaller distance on mobile for smoother effect */
    }
    
    .fadeInUp {
        transform: translateY(20px); /* Smaller distance on mobile for smoother effect */
    }
}