/* ==============================================
 * CSS for the "Bouncing from Left" Animation
 * Updated to increase image size
 * ============================================== */

/* * 1. Define the Keyframes for the Bouncing Effect.
 * (No changes needed here for size, only motion)
 */
@keyframes slide-bounce-left {
    0% {
        transform: translateX(-100%); /* Starts completely off-screen to the left */
        opacity: 0;
    }
    20% {
        transform: translateX(0%);    /* Slides into its final resting position */
        opacity: 1;
    }
    30% {
        transform: translateX(10%);   /* Overshoots for a bouncy effect */
    }
    40% {
        transform: translateX(-5%);   /* Bounces back slightly */
    }
    50% {
        transform: translateX(0%);    /* Settles into its final position */
        opacity: 1;
    }
    70% {
        transform: translateX(-10%);  /* Starts to slide off-screen to the left */
        opacity: 1;
    }
    100% {
        transform: translateX(-100%); /* Returns to the start position, off-screen */
        opacity: 0;
    }
}

/* * 2. Style the Container that Holds the Image.
 * IMPORTANT: Increased max-width here to make the image larger.
 */
.approach-img {
    animation: slide-bounce-left 6s ease-in-out infinite;
    
    width: 100%;
    /* INCREASE THIS VALUE to make the image taller/wider */
    max-width: 600px; /* Changed from 300px to 600px for a larger image */
    
    display: block; 
}

/* * 3. Style the Parent Container as a Viewport.
 * Adjust max-width here if you want the *viewport* of the animation to be wider.
 */
.image-container {
    width: 100%;
    /* You might want to increase this as well to match or exceed .approach-img's max-width */
    max-width: 700px; /* Changed from 500px to 700px to give more room for the larger image */
    margin: 0 auto;  
    overflow: hidden; 
}

/* * 4. Style the Image Itself.
 * These properties ensure the image scales correctly within its parent.
 */
.approach-img img {
    display: block;
    width: 100%; /* Image will fill the new, larger max-width of .approach-img */
    height: auto; /* Maintain aspect ratio */
}