body{

    margin:0;
    background:#ffffff;

}

.map-wrapper {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    overflow: hidden;
}

#svg-container{
    width:100%;
}

#svg-container svg{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
}

.map-wrapper{

    position:relative;

    width:100%;

    max-width:1600px;

    margin:auto;

}




/* PIN */

.pin{

    position:absolute;

    width:24;
    height:24;

    background:url(pin.svg) center center/contain no-repeat;

    cursor:pointer;

    transform:translate(-50%,-100%);
    transition:.25s;

}

.pin:hover{

    transform:translate(-50%,-105%) scale(1.1);

}


/* TOOLTIP */

#tooltip{
    position:absolute;
    display:none;

    max-width:320px;

    background:#fff;
    border-radius:14px;
    box-shadow:0 15px 35px rgba(0,0,0,.25);

    z-index:1001;
}

#tooltipContent{
    padding:20px;
    font-size:25px;
}
#tooltipContent li{

    font-size:21px;
}

#overlay{
    display:none;
}

#close{
    position:absolute;
    top:10px;
    right:15px;
    cursor:pointer;
    font-size:30px;
}
.map-pin
{
     width:24px;
        height:24px;
}
@media (max-width:768px){

    .pin{
        width:24px;
        height:24px;
    }

 #overlay{
        display:none;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.45);
        z-index:999;
    }

    #tooltip{

        position:fixed;

        top:40%;
        left:50% !important;

        transform:translate(-50%,-50%);

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

        display:none;

        z-index:1000;
    }

#tooltip.show{

    opacity:1;
    visibility:visible;

    transform:translate(-50%,-50%) scale(1);

}

#close{

    top:18px;
    right:20px;

}


}

.egypt{
left:58%;
top:41%;
}

.libya{
    left: 55%;
    top: 41%;
}

.turkey{
    left: 60%;
    top: 34%;
}

.saudi{
    left: 62%;
    top: 43%;
}

.uae{
    top: 43%;
    left: 65%;
}

.india{
left: 71%;
    top: 41%;
}

.vietnam{
    left: 79.5%;
    top: 49%;
}