/**THE SAME CSS IS USED IN ALL 3 DEMOS**/    
/**gallery margins**/  

.zoom {      
-webkit-transition: all 0.35s ease-in-out;    
-moz-transition: all 0.35s ease-in-out;    
transition: all 0.35s ease-in-out;     
cursor: -webkit-zoom-in;      
cursor: -moz-zoom-in;      
cursor: zoom-in;  
}     

.zoom:hover,  
.zoom:active,   
.zoom:focus {
/**adjust scale to desired size, 
add browser prefixes**/
-ms-transform: scale(5.5);    
-moz-transform: scale(5.5);  
-webkit-transform: scale(5.5);  
-o-transform: scale(5.5);  
transform: scale(5.5);    
position:relative;      
z-index:100;  
}

.background_image {      
    background-image: url('/assets/images/inner-bg.png');
    background-size: cover;
    background-position: center;
    height: 300px;
    position: relative; 
} 

.position_image {      
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
}  

        #zoom-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,.75);
            z-index: 9999;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(4px);
        }
        #zoom-overlay.active {
            display: flex;
            animation: fadeIn .2s ease;
        }
        #zoom-card {
            position: relative;
            background: #fff;
            border-radius: 12px;
            padding: 12px;
            box-shadow: 0 20px 60px rgba(0,0,0,.4);
            max-width: 300px;
            width: 90%;
            text-align: center;
            animation: popIn .2s ease;
        }
        #zoomed-img {
            width: 100%;
            max-height: 400px;
            object-fit: contain;
            border-radius: 8px;
            display: block;
        }
        #zoom-title {
            margin-top: 10px;
            font-size: 13px;
            font-weight: 500;
            color: #333;
            direction: rtl;
            line-height: 1.5;
            max-height: 55px;
            overflow: hidden;
        }
        #zoom-close {
            position: absolute;
            top: 8px;
            left: 8px;
            background: rgba(0,0,0,.15);
            border: none;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            cursor: pointer;
            font-size: 13px;
            color: #555;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s;
        }
        #zoom-close:hover { background: rgba(0,0,0,.3); color:#000; }
        @keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
        @keyframes popIn  { from { transform:scale(.85); opacity:0 } to { transform:scale(1); opacity:1 } }