*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
}

/* Overlay */

.popup-overlay{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background:rgba(0,0,0,.75);
    backdrop-filter:blur(6px);

    display:flex;
    justify-content:center;
    align-items:center;

    visibility:hidden;
    opacity:0;

    transition:.4s ease;

    z-index:99999;

}

/* Show popup */

.popup-overlay.show{

    visibility:visible;
    opacity:1;

}

/* Popup Box */

.popup-box{

    position:relative;

    width:90%;
    max-width:700px;

    background:#fff;

    border-radius:15px;

    overflow:hidden;

    transform:scale(.7);

    transition:.4s;

    box-shadow:0 20px 60px rgba(0,0,0,.4);

}

.popup-overlay.show .popup-box{

    transform:scale(1);

}

/* Image */

.popup-box img{

    width:100%;
    display:block;

}

/* Close Button */

.close-btn{

    position:absolute;

    top:12px;
    right:12px;

    width:42px;
    height:42px;

    border:none;

    border-radius:50%;

    background:#ffffff;

    color:#333;

    font-size:30px;

    cursor:pointer;

    box-shadow:0 5px 15px rgba(0,0,0,.25);

    transition:.3s;

}

.close-btn:hover{

    background:#e53935;

    color:#fff;

    transform:rotate(90deg);

}

/* Mobile */

@media(max-width:768px){

.popup-box{

    width:95%;
    border-radius:10px;

}

.close-btn{

    width:36px;
    height:36px;
    font-size:24px;

}

}