       body { overflow-x: hidden; }
        .about-section { padding: 120px 0; background: #fff; }
       
       
       
       .photo-container {
            position: relative;
            height: 550px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .stack-img {
            position: absolute;
            width: 220px;
            height: 280px;
            object-fit: cover;
            border-radius: 14px;
            border: 10px solid #FAFAFA;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            opacity: 0;
            
           
            transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), 
                        opacity 1.2s ease-out;
        }


        .img-back-left { 
            transform: translate(-400px, -400px) rotate(-30deg) scale(0.8); 
            transition-delay: 0.1s;
        }

        .img-back-right { 
            transform: translate(400px, -400px) rotate(30deg) scale(0.8); 
            transition-delay: 0.3s;
        }

        .img-mid-left { 
            transform: translateY(500px) rotate(-15deg); 
            transition-delay: 0.5s;
            z-index: 2;
        }

        .img-mid-right { 
            transform: translateY(500px) rotate(15deg); 
            transition-delay: 0.7s;
            z-index: 2;
        }

        .img-front-center { 
            transform: translateY(-600px) scale(1.1); 
            transition-delay: 0.9s;
            z-index: 3;
        }

     
        
        .photo-container.active .stack-img {
            opacity: 1;
        }

        .photo-container.active .img-back-left { 
            /* transform: translate(-130px, -70px) rotate(-8deg) scale(1);  */
            transform: rotate(15deg) translate(-150px, -50px) translateZ(0); 
        }

        .photo-container.active .img-back-right { 
            /* transform: translate(130px, -70px) rotate(12deg) scale(1);  */
            transform: rotate(348deg) translate(150px, -70px) translateZ(0); 
        }

        .photo-container.active .img-mid-left { 
            /* transform: translate(-90px, 50px) rotate(-5deg);  */
            transform: rotate(-8deg) translate(-90px, 50px) translateZ(0); 
        }

        .photo-container.active .img-mid-right { 
            /* transform: translate(90px, 50px) rotate(8deg);  */
             transform: rotate(8deg) translate(100px, 90px) translateZ(0); 
        }

        .photo-container.active .img-front-center { 
            /* transform: translate(0, 0) rotate(0deg) scale(1);  */
            transform: rotate(2deg) translate(0, 0) translateZ(50px) scale(1); 
        }

      
        .photo-container:not(.active) .stack-img {
            transition: transform 0.6s ease-in, opacity 0.4s ease-in;
            transition-delay: 0s !important; 
        }
        
        
        @media (max-width: 768px) {
    .photo-container {
        height: 400px; /* Shrink height for mobile */
    }

    .stack-img {
        width: 150px; /* Smaller images for mobile */
        height: 200px;
    }

    /* Reduce the "fly-in" distance so they don't cause massive overflow */
    .img-back-left { transform: translate(-150px, -200px) rotate(-30deg) scale(0.8); }
    .img-back-right { transform: translate(150px, -200px) rotate(30deg) scale(0.8); }
    
    /* Ensure the active state also fits the smaller screen */
    .photo-container.active .img-back-left { transform: rotate(15deg) translate(-80px, -30px); }
    .photo-container.active .img-back-right { transform: rotate(-12deg) translate(80px, -40px); }

}