.map-wrapper{
    position:relative;
    width:100%;
    max-width:900px;
}

.map-wrapper img{
    width:100%;
    display:block;
}

/* POINTER */

.pointer{
    position:absolute;
    transform:translate(-50%,-50%);
    opacity:0.35;
    transition:0.5s ease;
}

.pointer.active{
    opacity:1;
}

/* DOT */

.dot{
    width:16px;
    height:16px;
    background:#ff9800;
    border-radius:50%;
    position:relative;
    z-index:2;
}

.pointer.active .dot{
    animation:pulse 1.5s infinite;
}

.dot::before{
    content:"";
    position:absolute;
    inset:-8px;
    border:2px solid #ff9800;
    border-radius:50%;
    animation:ripple 1.5s infinite;
}

/* LABEL */

.label{
    position:absolute;
    left:28px;
    top:-10px;
    white-space:nowrap;
}

.label h3{
    font-size:20px;
    color:#111;
    margin:0;
font-weight:700;
}

.label p{
    font-size:14px;
    color:#666;
    margin-top:2px;
}

/* ANIMATION */

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.25);
    }

    100%{
        transform:scale(1);
    }

}

@keyframes ripple{

    0%{
        transform:scale(0.8);
        opacity:1;
    }

    100%{
        transform:scale(2.4);
        opacity:0;
    }

}

/* RESPONSIVE */

@media(max-width:768px){

    .label h3{
        font-size:16px;
font-weight:600;
    }

    .label p{
        font-size:11px;
    }

    .dot{
        width:10px;
        height:10px;
    }

}












.map-wrapper img {
    width: 100%;
    display: block;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}