/*responsive 3D gallery*/
html{
    background-color: #ffffff!important;
}

.w-gallery{
    margin-top: 0px;
}

.responsiveGallery-container{
    width: 100%;
    height: 600px; /* Base Height */
    padding: 30px 0px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
    background-color: #ffffff;
}
.responsiveGallery-wrapper{
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width:2000px;
    height: 600px; /* Base Height */
    margin: 0 auto;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
}

/* CORE FIX: Uses a fixed pixel adjustment for reliable visual centering on desktop */
.responsiveGallery-btn{
    position: absolute;
    top: 50%; /* Anchor button top edge to the container center */
    z-index: 3;
    display: block;
    width:5vw;
    height: 5vw; 
    /* Centers the button (-50%) then nudges it down by 50px (+50px) */
    -webkit-transform: translateY(calc(-50% + 50px));
    -moz-transform: translateY(calc(-50% + 50px));
    -ms-transform: translateY(calc(-50% + 50px));
    -o-transform: translateY(calc(-50% + 50px));
    transform: translateY(calc(-50% + 50px));
}
.responsiveGallery-btn_prev{
    background:url(../assets/icons/arrow-left.svg) center center no-repeat;
    background-size: contain; 
    left:1%;
    max-width: 50px;
}
.responsiveGallery-btn_next{
    background:url(../assets/icons/arrow-right.svg) center center no-repeat;
    background-size: contain; 
    right:1%;
    max-width: 50px;
}

/* Gallery Item Positioning */
.responsiveGallery-item{
    position: absolute;
    left: 0;
    right: 0;
    top: 20%; 
    z-index: 0;
    display: block;
    width: 20%; 
    opacity: 0;
    visibility: hidden;
}

/* -------------------------------------------------------------------------- */
/* DESKTOP BREAKPOINTS (Image Top positions differ)                             */
/* -------------------------------------------------------------------------- */

@media (min-width: 1500px) {
    .responsiveGallery-container {
        width: 100%;
        height: 400px!important;
        padding: 30px 0px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        position: relative;
        background-color: #ffffff;
    }
    .responsiveGallery-wrapper{
        width: 100%;
        height:400px!important;
        position: relative;
        overflow: hidden;
    }
    .responsiveGallery-item{
        position: absolute;
        left: 0;
        right: 0;
        top: 16%!important;
        z-index: 0;
        display: block;
        width: 20%; 
        opacity: 0;
        visibility: hidden;
    }
    /* Buttons should still use the calc() fix for this fixed height */
}

@media (min-width: 1200px) and (max-width: 1499px) {
    .responsiveGallery-container {
        width: 100%;
        height: 400px!important;
        padding: 30px 0px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        position: relative;
        background-color: #ffffff;
    }
    .responsiveGallery-wrapper{
        width: 100%;
        height:400px!important;
        position: relative;
        overflow: hidden;
    }
    .responsiveGallery-item{
        position: absolute;
        left: 0;
        right: 0;
        top: 25%!important;
        z-index: 0;
        display: block;
        width: 20%; 
        opacity: 0;
        visibility: hidden;
    }
    /* Buttons should still use the calc() fix for this fixed height */
}

/* -------------------------------------------------------------------------- */
/* TABLET/MOBILE BREAKPOINTS (Targeting the view near 768px-1000px)           */
/* -------------------------------------------------------------------------- */

/* Smoother transition from 1200px (400px height) */
@media (min-width: 1000px) and (max-width: 1199px) { 
    .responsiveGallery-container {
        width: 100%;
        height: 350px; 
        padding: 30px 0px;
        /* ... */
    }
    .responsiveGallery-wrapper{
        width: 100%;
        height:350px; 
        /* ... */
    }
    .responsiveGallery-item{
        /* ... */
        top: 20%;
        /* ... */
    }
    /* Buttons should use a reduced offset for the lower height */
    .responsiveGallery-btn{
        transform: translateY(calc(-50% + 30px));
    }
}

/* Fallback for anything under 1000px that isn't caught by smaller rules */
@media (max-width: 1000px){
    .responsiveGallery-container {
        width: 100%;
        height: 350px; /* Increased from 300px for better vertical space */
        /* ... */
    }

    .responsiveGallery-wrapper{
        width: 100%;
        height: 350px; /* Matched height */
        /* ... */
    }	

    .responsiveGallery-item{
        width: 20%; 
        /* ... */
        top: 30%;
        /* ... */
    }
    /* The 50px offset is definitely too much here, let's use a minimal 10px offset */
    .responsiveGallery-btn{
        transform: translateY(calc(-50% + 10px));
    }
}

/* CRUCIAL FIX: Targeting the 3-item view seen in your screenshots (around 768px down to 560px) */
@media (max-width: 768px){
    .responsiveGallery-container {
        width: 100%;
        height: 400px; /* Increased from 300px to prevent clipping */
        padding: 30px 0px;
        /* ... */
    }
    .responsiveGallery-wrapper{
        width: 100%;
        height: 400px; /* Matched container height */
        /* ... */
    }	
    
    .responsiveGallery-item{
        width: 33.33%; /* Slightly increased width for better fit */
        position: absolute;
        left: 0;
        right: 0;
        top: 25%; /* Lowered the image top to align better */
        z-index: 0;
        display: block;
        opacity: 0;
        visibility: hidden;
        margin-left: 0!important;
    }
    
    /* Revert to simple perfect centering for this height/size */
    .responsiveGallery-btn{
        transform: translateY(-50%); 
    }
}

/* -------------------------------------------------------------------------- */
/* SMALL MOBILE BREAKPOINTS (Adjusting 1-item view)                          */
/* -------------------------------------------------------------------------- */

@media (max-width: 560px){
    .responsiveGallery-container {
        width: 100%;
        height: 380px; /* Slight increase for small devices */
        padding: 30px 0px;
        /* ... */
    }
    .responsiveGallery-wrapper{
        width: 100%;
        height: 380px; /* Matched height */
        /* ... */
    }	
    
    .responsiveGallery-item{
        width: 74%;
        height: auto;
        position: fixed;
        margin-bottom: 60px;
        margin: auto;
        left: 0;
        right: 0;
        top: 15%; /* Centered better vertically */
        margin-left: auto!important;
    }

    /* FIX: Ensure height matches width and use standard 50% center */
    .responsiveGallery-btn{
        width: 10%;
        height: 10%; 
        top: 50%; 
        transform: translateY(-50%); 
    }
}
@media (max-width: 400px){
    .responsiveGallery-container {
        width: 100%;
        height: 350px;
        padding: 30px 0px;
        /* ... */
    }
    .responsiveGallery-wrapper{
        width: 100%;
        height:350px;
        /* ... */
    }	
    
    .responsiveGallery-item{
        width: 74%;
        height: auto;
        position: fixed;
        margin-bottom: 60px;
        margin: auto;
        left: 0;
        right: 0;
        top:10%; /* Slight adjustment */
    }

    /* FIX: Ensure height matches width and use standard 50% center */
    .responsiveGallery-btn{
        width: 10%;
        height: 10%; 
        top: 50%; 
        transform: translateY(-50%); 
    }
}

/* -------------------------------------------------------------------------- */
/* INFO STYLES (CORRECTED CLASS NAMES)                                         */
/* -------------------------------------------------------------------------- */

.responsiveGallery-link{
    display: flex;
    width: 100%;
    justify-content:center;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
}
.responsiveGallery-pic{
    width: 100%;
    height: auto;
}
.w-responsiveGallery-info{
    width: 100%;
    margin: 0 auto;
    padding-top: 5%;
    text-align: center;
    color: #222;
    font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: 200;
}
.responsiveGallery-name{
    font-size: 1.25em;
    color: #222;
}
.responsiveGallery-position{
    padding-top: 4%;
    font-size: 0.875em;
    line-height: 1.3;
}
/*responsive 3D gallery end*/