.cw-stack-wrapper{
display:flex;
align-items:center;
justify-content:center;
gap:5vw;
padding:6vw 4vw;
background:#fff;
flex-wrap:wrap;
}

/* LEFT SECTION */

.cw-left-section{
flex:1 1 auto 600px;
display:flex;
justify-content:center;
}

.image-container{
position:relative;
width:100%;
max-width:700px;
aspect-ratio: 7 / 5;
}

/* BASE IMAGE STYLE */

.square-img{
position:absolute;
cursor:pointer;
transition:all .4s cubic-bezier(.175,.885,.32,1.275);
}

.square-img img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}

/* LEFT IMAGE */

.img-top{
left:0%;
top:22%;
width:42%;
aspect-ratio:1/1;
z-index:1;
}

/* RIGHT IMAGE */

.img-bot{
right:0%;
top:0%;
width:55%;
aspect-ratio:4/5;
z-index:1;
}

/* CENTER IMAGE */

.img-mid{
left:20%;
top:38%;
width:42%;
aspect-ratio:1/1;
box-shadow:0 25px 50px rgba(0,0,0,.25);
z-index:5;
}

/* HOVER */

.square-img:hover,
.square-img.active{
transform:scale(1.25);
z-index:10;
}

/* RIGHT CONTENT */

.cw-right-section{
flex:1 1 420px;
max-width:520px;
}

.content-display{
padding:20px;
}

.info-pane{
display:none;
}

.info-pane.active{
display:block;
animation:slideIn .5s ease-out;
}

.content-display h2{
font-size:clamp(22px,2vw,28px);
margin-bottom:20px;
color:#DF3B22;
}

.content-display p{
font-size:clamp(15px,1.2vw,16px);
line-height:1.7;
color:#333;
}

/* ANIMATION */

@keyframes slideIn{

from{
opacity:0;
transform:translateX(40px);
}

to{
opacity:1;
transform:translateX(0);
}

}

/* TABLET */

@media (max-width:1024px){

.cw-stack-wrapper{
gap:40px;
padding:60px 30px;
}

.image-container{
max-width:600px;
}

}

/* MOBILE */

@media (max-width:768px){

.cw-stack-wrapper{
flex-direction:column;
text-align:center;
gap:40px;
}

.cw-left-section{
flex:unset;
width:100%;
}

.image-container{
max-width:420px;
margin:auto;
}

/* reposition for mobile */

.img-top{
top:0;
width:45%;
}

.img-bot{
width:55%;
}

.img-mid{
left:24%;
top:3;
width:45%;
}

.cw-right-section{
max-width:100%;
padding:0 20px;
}

}

/* SMALL MOBILE */

@media (max-width:480px){

.image-container{
max-width:320px;
}

.img-top{
top:32%;
width:48%;
}

.img-bot{
width:58%;
}

.img-mid{
left:26%;
top:50%;
width:48%;
}

.content-display{
padding:10px;
}

}

/* Container Wrapper Split */
        .cw-stack-wrapper {
            display: flex;
            width: 100%;
           /* min-height: 85vh;*/
            box-sizing: border-box;
            align-items: center;
        }

        .cw-left-section, 
        .cw-right-section {
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        /* Left Side: Flexbox Layout for Vertical Center Alignment */
        .image-container {
            display: flex;
            align-items: center;      /* Keeps both images perfectly centered vertically */
            justify-content: center;
            position: relative;
            width: 600px;  /* Slightly widened to accommodate the broader parallel layout */
            height: 440px; 
        }

        .square-img {
            position: relative;
            width: 315px;  
            height: 315px; 
            background: #fff;
            border: 6px solid #fff;
            box-shadow: 0 10px 25px rgba(0,0,0,0.08);
            /* Smooth cubic-bezier curve handles clean, jitter-free popouts */
            transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1.1), 
                        box-shadow 0.6s ease, 
                        border-color 0.6s ease,
                        z-index 0.6s step-out;
            cursor: pointer;
            z-index: 1;
            overflow: hidden;
            border-radius: 4px;
            box-sizing: border-box;
        }

        /* Overlap Math Update:
           Image Width = 315px.
           30% Overlap target (less than 40%) = 315px * 0.3 = 94.5px total overlap.
           Divided between two sides = 94.5px / 2 = 47.25px negative margin each.
        */
        .img-top { 
            margin-right: -47.25px; 
            transform-origin: center center;
        }
        
        .img-bot { 
            margin-left: -47.25px;
            transform-origin: center center;
        }

        /* High-Impact Hover & Active Pop-out States */
        .square-img.active,
        .square-img:hover {
            z-index: 10;
            transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1.1), 
                        box-shadow 0.6s ease, 
                        border-color 0.6s ease,
                        z-index 0s step-start; /* Instantly brings to front on touch/hover */
            transform: scale(1.22); /* Dramatic center popout scale */
            box-shadow: 0 30px 60px rgba(0,0,0,0.25), 0 12px 22px rgba(0,0,0,0.12);
            border-color: #fff; /* Premium border contrast color accent  #b392ac; */
        }

        /* Handling images inside structure safely */
        .square-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.6s ease;
        }

        /* Subtle camera zoom interior effect when image becomes active */
        .square-img.active img,
        .square-img:hover img {
            transform: scale(1.04);
        }

        .content-display {
            width: 100%;
            padding: 0 5%;
            box-sizing: border-box;
        }

        .info-pane {
            display: none;
            max-width: 550px;
        }

        /* Smooth slide-in up entry transition when content changes */
        .info-pane.active {
            display: block;
            animation: cwFadeInUp 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
        }

        /* Responsive Breakpoint for Mobile Screens */
        @media (max-width: 992px) {
            .cw-stack-wrapper {
                flex-direction: column;
                padding: 40px 20px !important;
            }
            .cw-left-section, .cw-right-section {
                width: 100%;
            }
            .cw-right-section {
                margin-top: 40px;
            }
            .image-container {
                width: 100%;
                max-width: 450px;
                height: 300px;
            }
            .square-img {
                width: 220px;
                height: 220px;
            }
            /* Adjusted overlap for smaller mobile image sizing (30% of 220px = 66px total / 2) */
            .img-top { margin-right: -33px; }
            .img-bot { margin-left: -33px; }
            
            .square-img.active,
            .square-img:hover {
                transform: scale(1.12); /* Slightly scaled down on mobile to fit viewpoints */
            }
        }
/* Landscape mobile */
@media (max-width: 992px) and (orientation: landscape) {
    .cw-stack-wrapper {
        min-height: unset !important;
        padding: 15px 20px !important;
    }


    .img-top { margin-right: -24px; }
    .img-bot { margin-left: -24px; }

    .cw-right-section {
        margin-top: 15px;
    }
}